<template>
	<view class="container-withdrawal">
		<view class="flex-between" style="height:100rpx;">
			<view class="" style="font-size: 24rpx;color: #232323;font-weight: bold;">
				{{$t('wallet.name15')}}
			</view>
			<view class="" style="font-size: 24rpx;color: #5d5d5d;"
				@tap="$fun.jump(`/pageA/wallet/rechargeList?name=${$t('wallet.name3')}&type=1`)">
				{{$t('wallet.name16')}}
			</view>
		</view>
		<view class="select flex-between">
			<view class="title flex">
				<view class="img">
					<image :src="$fun.imgUrl(activeObj.image)" mode=""></image>
				</view>
				<view class="">
					{{activeObj.name}}
				</view>
			</view>
			<view class="rt">
				{{$t('wallet.name3')}}:{{money || 0}} {{activeObj.name}}
			</view>
		</view>
		<view class="cell">
			<view class="title">
				{{$t('wallet.name17')}}
			</view>
			<view class="network flex-between" @tap="isPopup = true">
				<text class="text" v-if="network">{{network}}</text>
				<text class="plh" v-else>{{$t('wallet.name18')}}</text>
				<div><u-icon name="arrow-down-fill" size="16"></u-icon></div>
			</view>
		</view>
		<view class="cell" v-if="activeIndex !== null">
			<view class="flex" style="margin: 20rpx 0; justify-content: center;"
				@click="previewImage($fun.imgUrl(activeObj.addr[activeIndex].addr_image))">
				<image style="width: 300rpx;height: 300rpx;" :src="$fun.imgUrl(activeObj.addr[activeIndex].addr_image)"
					mode=""></image>
			</view>
			<view class="title" style="font-weight: 400;color: #999999;">
				{{$t('wallet.name19')}}
			</view>
			<view class="flex-between address">
				<view class="text">
					{{ activeObj.addr[activeIndex].addr}}
				</view>
				<view class="copy" @click="copy(activeObj.addr[activeIndex].addr)">
					<image style="width: 40rpx;height: 40rpx;" src="@/static/user/copy.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="cell flex-between">
			<view class="title">
				{{$t('wallet.name20')}}
			</view>
			<view class="" style="padding: 0 50rpx;">
				<image :src="image?$fun.imgUrl(image):'/static/ico-101.png'" @click="uploadImage('auth','ali_image')"
					style="width: 200rpx;height:200rpx;" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<u-button type="primary" :text="$t('user.name48')" shape="circle" throttleTime="2000"
				@click="confirm"></u-button>
		</view>
		<u-action-sheet :actions="list" :title="$t('wallet.name21')" :show="show" :cancelText="$t('vnode.name10')"
			@close="show = false" @select="handleSelect"></u-action-sheet>
		<u-popup :show="isPopup" @close="closePopup" mode="bottom" :round="10" closeable>
			<view class="Popup1">
				<view class="" style="padding-left: 30rpx;">{{$t('wallet.name22')}}</view>
				<view class="tips">
					<text style="color: #232323;font-weight: 600;">{{$t('wallet.name31')}}：</text>
					{{$t('wallet.name23')}}
				</view>
				<view class="main">
					<view class="main-item" v-for="(item,index) in networkList"
						@click="handleNetwork(item.network,index)">
						<view class="tit">{{item.network}}</view>
						<view class="tex">{{$t('wallet.name24')}}: 0</view>
						<view class="tex">{{$t('wallet.name25')}}：2m</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowNum" @close="closeNum" mode="center" :round="10">
			<view class="num-popup">
				<view class="title">{{$t('wallet.name26')}}</view>
				<view class="input flex-between">
					<input type="text" v-model="money" />
					<view class="text">
						{{activeObj.name}}
					</view>
				</view>
				<view class="btns flex-between">
					<u-button type="primary" :plain="true" :hairline="true" :text="$t('vnode.name10')" shape="circle"
						style="width: 180rpx;" @click="closeNum"></u-button>
					<u-button type="primary" :text="$t('wallet.name30')" shape="circle" style="width: 180rpx;"
						@click="confirmNum"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				showPwd: false,
				money: '',
				list: [],
				bankList: [],
				bid: '',
				id: '',
				titleName: '', //标题
				placeholder: '',
				active: "`",
				balance: '==',
				balance1: '==',
				withdrawal_type: 0,
				isChecked: false,
				btnloading: false,
				marthlist: [],
				isPopup: true,
				show: false,
				network: '',
				id: '',
				networkList: [],
				name: '请选择',
				image: '',
				activeObj: {},
				isShowNum: false,
				activeIndex: null
			}
		},
		// onNavigationBarButtonTap(e) {
		// 	this.$fun.jump(`/pages/user/wallet/walletdetail?id=${this.id}`)
		// },
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: this.$t('wallet.name3')
			})
			this.id = options.id
			this.titleName = options.name
			this.bid = options.bid
			// this.$fun.ajax.post('index/config', {}).then(res => {
			// 	this.placeholder = res.data.withdrawal_title
			// 	this.withdrawal_type = res.data.withdrawal_type
			// })
			this.getwithdrawal()
		},
		computed: {
			// openExamine() {
			// 	return this.$store.state.openExamine;
			// }
		},
		watch: {
			money(val) {
				if (val) {
					this.money1 = ''
				}
			}
		},
		methods: {
			confirmNum() {
				if (!this.money) return this.$fun.msg(this.$t('wallet.name28'))
				this.isShowNum = false
				this.isPopup = false
			},
			closeNum() {
				this.isShowNum = false
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				})
			},
			uploadImage(str1, str2) {
				if (this.isDis) {
					return
				}
				// 从相册选择图片
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFilePaths, str1, str2);
					}
				});
			},
			handleUploadFile(data, str1, str2) {
				const _this = this;
				const filePath = data.path || data[0];
				_this.$fun.uploadPic(filePath, 'file')
					.then(r => {
						_this.image = r.data.url;
					});
			},
			handleNetwork(val, index) {
				this.activeIndex = index
				this.network = val
				this.isShowNum = true
				// this.isPopup = false
			},
			async getwithdrawal() {
				const res = await this.$fun.ajax.post('config/recharge')
				this.list = res.data.list
				this.activeObj = res.data.list.find(item => item.id == this.id)
				this.networkList = this.activeObj.addr
			},
			handleShow() {
				this.show = true
			},
			closePopup() {
				this.isPopup = false
			},
			openPopup() {

			},
			onChange(item, index) {
				// //console.log(e)
				this.active = index;
				this.bid = item.id;
			},
			configBank(e) {
				this.bid = this.bankList[e.index].id
			},
			async confirm() {
				let {
					activeObj,
					money,
					network,
					image
				} = this;
				let parms = {
					id: activeObj.id,
					money,
					network,
					image
				}
				if (!activeObj.id) {
					this.$fun.msg('请选择充币币种')
					return
				}
				if (!network) {
					this.$fun.msg('请选择充币网络')
					return
				}
				if (!money) {
					this.$fun.msg('请输入充值数量')
					return
				}
				if (!image) {
					this.$fun.msg('请上传打款凭证')
					return
				}
				this.btnloading = true
				await this.$fun.ajax.post('user/recharge', {
					...parms
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.$fun.jump('/pages/user/user', 2, 1200)
					}
				})
			},
			changePwdState() {
				this.showPwd = !this.showPwd;
			}
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: `./withdrawList?id=${this.id}&name=${this.titleName}`
			})
		}

	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.container-withdrawal {
		height: 100%;
		padding: 0 30rpx;

		.balance {
			padding: 40rpx 20rpx;

			.tex {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #505050;
			}

			.num {
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 60rpx;
				color: #232323;
				line-height: 80rpx;
			}
		}

		.select {
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;

				.img {
					width: 64rpx;
					height: 64rpx;
					margin-right: 10rpx;
				}
			}

			.rt {}
		}

		.cell {
			margin: 40rpx 0;
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				margin-bottom: 30rpx;
			}
		}

		.address {
			.text {
				word-break: break-all;
			}

			.copy {
				width: 200rpx;
				margin-left: 10rpx;
				display: flex;
				justify-content: flex-end;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			text-align: center;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 38rpx;
			}
		}

		.Popup1 {
			height: 800rpx;
			padding-top: 40rpx;

			.tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #676767;
				line-height: 28rpx;
				background-color: #f0f0f0;
				padding: 30rpx 60rpx;
			}

			.main {
				padding: 30rpx;

				.main-item {
					height: 140rpx;
					border: 1rpx solid #cecece;
					padding: 10rpx 30rpx;
					margin: 20rpx 0;

					.tit {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #232323;
						line-height: 38rpx;
					}

					.tex {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
					}
				}
			}
		}

		.num-popup {
			width: 500rpx;
			height: 316rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				text-align: center;
			}

			.input {
				height: 64rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 30rpx 0;
				padding: 0 20rpx;

				.text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
				}
			}

		}

		.network {
			height: 64rpx;
			background: #F2F2F2;
			border-radius: 16rpx;
			padding: 0 20rpx;

			.plh {
				color: #cecece;
			}

			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
			}
		}
	}
</style>